<template>
    <div class="table_div">
        <div class="search_area">
            <el-input v-model="param.dictionaryCode" clearable placeholder="字典编号" style="width: 200px;"></el-input>
            <el-input v-model="param.dictionaryName" clearable placeholder="字典名称" style="width: 200px;"></el-input>
            <el-button type="primary" @click="searchList" v-loading.fullscreen.lock="loading">查询</el-button>
            <el-button type="primary" @click="resetData">重置</el-button>
            <el-button type="primary" @click="editData(0)">新增</el-button>
            <el-button type="primary" @click="pushData">推送数据</el-button>
        </div>
        <div :style="cardDataList" class="card_data_list">
            <el-card v-for="(item, index) in dataList" :key="index" :title="item.dictionaryContent" class="card_info">
                <div class="card_title">
                    <div class="card_title_info">{{ item.dictionaryCode }}</div>
                    <el-button type="primary" @click="editData(item.id)"><i class="el-icon-circle-plus"></i></el-button>
                    <el-button type="primary" @click="editData(item.parentsId, item.id)"><i class="el-icon-edit"></i></el-button>
                    <el-popconfirm title="是否确定删除当前数据？" @confirm="delDate(item.id)">
                        <el-button slot="reference" type="primary"><i class="el-icon-delete"></i></el-button>
                    </el-popconfirm>
                </div>
                <div class="list_table">
                    <el-table ref="table" :data="item.dictionaryList"
                              :tree-props="{children: 'dictionaryList'}"
                              border
                              cell-class-name="cell_table"
                              class="table_grid"
                              height="300px"
                              row-key="configKey"
                              style="width: 500px">
                        <el-table-column label="字典编号" prop="dictionaryCode" width="200"></el-table-column>
                        <el-table-column label="字典内容" prop="dictionaryContent" minWidth="100" ></el-table-column>
                        <el-table-column label="启用" prop="enableFlag" width="60">
                            <template slot-scope="scope">
                                {{ $common.getDicName('yesNo', scope.row.enableFlag) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" prop="text7" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" @click="editData(scope.row.id)">
                                    <i class="el-icon-circle-plus"></i>
                                </el-button>
                                <el-button type="text" @click="editData(scope.row.parentsId, scope.row.id)">
									<i class="el-icon-edit-outline"></i>
								</el-button>
                                <el-popconfirm title="是否确定删除当前数据？" @confirm="delDate(scope.row.id)">
                                    <el-button slot="reference" type="text"><i class="el-icon-delete"></i></el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </div>
        <pagination :current-page="param.pageNum" :page-size="param.pageSize" :total="total"
                    layout="total, prev, pager, next" @currentChange="handleCurrentChange"></pagination>
        <!--编辑字典信息-->
        <dictionary-edit :visible.sync="showEdit" :id="id" :parents-id="parentsId" @refreshList="searchList"></dictionary-edit>
    </div>
</template>

<script>
import Pagination from "@/components/pagination/pagination";
import DictionaryEdit from "./compnent/dictionaryEdit";

export default {
    name: "dataDictionary",
    components: {DictionaryEdit, Pagination},
    data() {
        return {
            cardDataList: {
                height: '500px',
            },
            loading: false,
            showEdit: false,

            id: 0,
            parentsId: 0,
            dataList: [],
            total: 0,
            param: {
                dictionaryCode: '',
                dictionaryName: '',
                field: 'id',
                order: 'desc',
                pageSize: 20,
                pageNum: 1,
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.cardDataList.height = (document.body.offsetHeight - 190) + "px";
        })
        this.searchList();
    },
    methods: {
        handleCurrentChange(val) {
            this.param.pageNum = val;
            this.searchList();
        },
        resetData() {
            this.param.dictionaryCode = '';
            this.param.dictionaryName = '';
            this.param.pageNum = 1;
            this.searchList();
        },
        searchList() {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/baseDictionary/getPageList", this.param).then(res => {
                this.total = res.data.total;
                this.dataList = res.data.rows;
            }).finally(() => {
                this.loading = false;
            })
        },
        editData(parentsId, id) {
            this.id = id;
            this.parentsId = parentsId;
            this.showEdit = true;
        },
        delDate(id) {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/baseDictionary/delete/" + id).then(res => {
                this.searchList();
                this.$message.success(res.message);
            }).finally(() => {
                this.loading = false;
            })
        },
        pushData() {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/baseDictionary/pushData").then(res => {
                this.$store.state.refreshDic = true;
            }).finally(() => {
                this.loading = false;
            })
        }
    }
}
</script>

<style lang="scss">

//块数据列表
.card_data_list {
    min-width: 1040px;
    border: #eaeaea solid 1px;
    overflow-y: auto;
    margin: 0 10px;

    .card_info {
        float: left;
        overflow-y: auto;

        .card_title {

            .card_title_info {
                margin: 10px;
                height: 30px;
                line-height: 30px;
                width: auto;
                float: left;
                font-size: 16px;
                font-weight: bold;
            }

            .el-button {
                padding: 10px;
                margin: 7px 10px 0 0;
                i {
                    font-size: 12px;
                }
            }

        }
    }

    .card_info:hover {
        border: 1px solid red;
    }

    .active {
        border: 1px solid red;
    }
}

</style>